<script setup>
import elems from '../../data/LanguageElementData.json'
import weaponElems from '../../data/LanguageWeaponElementData.json'

const props = defineProps(['data', 'alldata', 'weaponElem'])
const icon = import.meta.env.BASE_URL + 'icons/skill/' + props.data.get(0)[0].icon + '.png'
const name = props.data.get(0)[0].name
const elem = props.data.get(0)[0].elem
const intro = props.data.get(0)[0].intro
const range = props.data.get(0)[0].rangeType == 1 ? '自身' : getRangeArea('range')
const area = props.data.get(0)[0].areaType == 1 ? '目标' : getRangeArea('area')

const weaponElem = props.data.get(0)[0].weaponElem ? props.weaponElem : 0

function getRangeArea(target) {
  const ret = []
  for (const l of props.data.get(0)) {
    let v = ''
    switch (l[target+'Type']) {
      case 2:
        let bound2 = l[target].split(',')
        v = bound2[0]/100 + '\u00d7' + bound2[0]/100
        if (Math.abs(bound2[1]) >= 100) {
          v = bound2[1]/100 + '\u00d7' + bound2[1]/100 + '到' + v
        }
        break
      case 3:
        let bound3 = l[target].split(',')
        v = bound3[0]/100 + '（曼哈顿距离）'
        if (Math.abs(bound3[1]) >= 100) {
          v = bound3[1]/100 + '到' + v
        }
        break
      case 5:
        v = l[target].split(',')[0]/100 + '（直线）'
        break
      case 7:
        v = '矩形范围'
        break
      case 8:
        v = '全场'
    }
    ret.push(v)
  }
  if (ret[0] == ret[ret.length-1]) {
    return ret[0]
  } else {
    return ret.join('<br>')
  }
}
  
</script>

<template>
  <div class="skill-item">
    <div class="skill-signature">
      <img :src="icon" alt="技能图标">
      <div class="skill-name">{{ name }}</div>
      <div class="skill-tag">
        <span v-if="weaponElem" :class="['weapon-elem', 'weapon-elem-'+weaponElem]">{{ weaponElems[weaponElem] }}&nbsp;&nbsp;</span>
        <span v-if="elem" :class="['elem', 'elem-'+elem]">{{ elems[elem] }}&nbsp;&nbsp;</span>{{ data.get(0)[0].tag }}</div>
    </div>
    <div class="skill-content">
      <div class="skill-desc">
        <p v-if="data.get(0)[0].defBreak" class="skill-def-break">稳态伤害：{{ data.get(0)[0].defBreak }}</p>
        <p v-for="l of data.get(0)" v-html="l.descLv + (l.buff ? '<br><br>' + l.buff.join('<br>') : '')" class="skill-desc-lv"></p>
        <p class="skill-intro">{{ intro }}</p>
        <p v-if="data.get(0)[0].cd||data.get(0)[0].mp" class="skill-limit">
          <span v-if="data.get(0)[0].cd">冷却回合 {{ data.get(0)[0].cd }}</span>
          <span v-else>导染消耗 {{ data.get(0)[0].mp }}</span>
        </p>
      </div>
      <div class="skill-map">
        <dl>
          <dt>有效距离</dt>
          <dd v-html="range"></dd>
          <dt>作用范围</dt>
          <dd v-html="area"></dd>
        </dl>
      </div>
    </div>
  </div>
</template>
